<template>
  <header class="pure-g">
    <div class="inner pure-u-1">
      <!-- <div class="search-input">
        <input type="text" placeholder="search">
        <i class="iconfont pm-icon-sousuo"></i>
      </div> -->
      <div class="online-status pure-u-1-3">
        <p class="online-text">status: {{ onlineText }}</p>
        <button
          class="btn btn-primary"
          v-if="!online"
          @click="onClickEnterMasterCode"
        >enter remote master code for offline using</button>
      </div>
      <a href="javascript:;" class="notification pure-u-1-24">
        <i class="icon icon-notification"></i>
      </a>
    </div>
  </header>
</template>

<script>
import { mapState } from 'vuex'
import { sessionStore } from '@/utils/store'
import { PM_MASTER_CODE_KEY } from '@/js/constants'

export default {
  name: 'HeaderCom',
  computed: {
    ...mapState({
      online: state => state.online
    }),
    onlineText() {
      return this.online ? 'online' : 'offline'
    }
  },
  methods: {
    onClickEnterMasterCode() {
      const masterCode = sessionStore.get(PM_MASTER_CODE_KEY)
      // eslint-disable-next-line no-alert
      const newMasterCode = window.prompt('enter new master code for only offline use', masterCode)
      sessionStore.set(PM_MASTER_CODE_KEY, newMasterCode)
      this.$emit('on-refresh')
    }
  }
}
</script>
